/**
 * 剪贴板访客编辑功能完整测试
 * 
 * 测试场景：
 * 1. 访问具有编辑权限的剪贴板
 * 2. 验证访客可以编辑内容
 * 3. 修改内容并保存
 * 4. 验证保存成功
 * 5. 刷新页面验证持久化
 */

import { browser_navigate, browser_resize, browser_snapshot, browser_click, browser_type, browser_wait_for, browser_wait_until, browser_get_text, browser_evaluate, browser_take_screenshot } from '@ianmacartney/claude-web-browser'

// 测试配置
const TEST_CONFIG = {
  baseUrl: 'http://localhost:5173',
  shareId: 'QOZ12RSU',
  testContent: {
    original: '', // 将从页面获取
    modified: '这是访客编辑的测试内容 - ' + new Date().toLocaleString()
  },
  timeout: 10000
}

// 测试用例类
class VisitorEditTest {
  constructor() {
    this.results = {
      passed: 0,
      failed: 0,
      tests: []
    }
    this.startTime = Date.now()
  }

  // 记录测试结果
  recordTest(name, passed, message = '', screenshot = null) {
    const result = {
      name,
      passed,
      message,
      screenshot,
      timestamp: new Date().toISOString()
    }
    
    this.results.tests.push(result)
    
    if (passed) {
      this.results.passed++
      console.log(`✅ ${name}: ${message}`)
    } else {
      this.results.failed++
      console.log(`❌ ${name}: ${message}`)
    }
  }

  // 等待元素可见
  async waitForElement(selector, timeout = TEST_CONFIG.timeout) {
    try {
      await browser_wait_until(`document.querySelector('${selector}')`, timeout)
      return true
    } catch (error) {
      return false
    }
  }

  // 等待页面加载完成
  async waitForPageLoad() {
    await browser_wait_for({ time: 2 })
    
    // 等待Vue组件挂载完成
    await browser_wait_until(`
      document.querySelector('.clipboard-tab') && 
      !document.querySelector('.n-spin-container .n-spin-body')
    `, TEST_CONFIG.timeout)
  }

  // 测试1: 导航到剪贴板页面
  async testNavigation() {
    try {
      const url = `${TEST_CONFIG.baseUrl}/utilityTool/clipboard?shareId=${TEST_CONFIG.shareId}`
      console.log(`🚀 导航到: ${url}`)
      
      await browser_navigate({ url })
      await this.waitForPageLoad()
      
      // 截图记录初始状态
      await browser_take_screenshot({ filename: 'visitor-edit-01-navigation.png' })
      
      // 验证页面是否正确加载
      const pageTitle = await browser_get_text({ element: 'title' })
      const hasClipboardContent = await browser_evaluate(`
        document.querySelector('textarea') !== null
      `)
      
      if (hasClipboardContent) {
        this.recordTest(
          '页面导航', 
          true, 
          `成功导航到剪贴板页面，页面标题: ${pageTitle}`,
          'visitor-edit-01-navigation.png'
        )
        return true
      } else {
        this.recordTest('页面导航', false, '页面加载失败，未找到剪贴板内容区域')
        return false
      }
    } catch (error) {
      this.recordTest('页面导航', false, `导航失败: ${error.message}`)
      return false
    }
  }

  // 测试2: 验证编辑权限
  async testEditPermission() {
    try {
      console.log('🔍 验证编辑权限...')
      
      // 等待内容加载
      await browser_wait_for({ time: 1 })
      
      // 检查textarea是否可编辑
      const textareaInfo = await browser_evaluate(`
        const textarea = document.querySelector('textarea');
        if (!textarea) return { exists: false };
        
        return {
          exists: true,
          readonly: textarea.readOnly,
          disabled: textarea.disabled,
          value: textarea.value
        };
      `)
      
      if (!textareaInfo.exists) {
        this.recordTest('编辑权限验证', false, '未找到内容编辑区域')
        return false
      }
      
      // 保存原始内容
      TEST_CONFIG.testContent.original = textareaInfo.value
      
      // 截图记录编辑状态
      await browser_take_screenshot({ filename: 'visitor-edit-02-edit-permission.png' })
      
      if (textareaInfo.readonly || textareaInfo.disabled) {
        this.recordTest(
          '编辑权限验证', 
          false, 
          `内容区域不可编辑 - readonly: ${textareaInfo.readonly}, disabled: ${textareaInfo.disabled}`
        )
        return false
      } else {
        this.recordTest(
          '编辑权限验证', 
          true, 
          '内容区域可编辑，访客具有编辑权限',
          'visitor-edit-02-edit-permission.png'
        )
        return true
      }
    } catch (error) {
      this.recordTest('编辑权限验证', false, `权限验证失败: ${error.message}`)
      return false
    }
  }

  // 测试3: 修改内容
  async testContentModification() {
    try {
      console.log('✏️ 修改内容...')
      
      // 清空并输入新内容
      await browser_click({ element: 'textarea' })
      
      // 全选并删除原有内容
      await browser_evaluate(`
        const textarea = document.querySelector('textarea');
        textarea.select();
      `)
      
      await browser_type({ text: TEST_CONFIG.testContent.modified })
      
      // 等待Vue响应式更新
      await browser_wait_for({ time: 1 })
      
      // 验证内容是否已更改
      const currentContent = await browser_evaluate(`
        document.querySelector('textarea').value
      `)
      
      // 截图记录修改后状态
      await browser_take_screenshot({ filename: 'visitor-edit-03-content-modified.png' })
      
      if (currentContent === TEST_CONFIG.testContent.modified) {
        this.recordTest(
          '内容修改', 
          true, 
          `成功修改内容: ${TEST_CONFIG.testContent.modified.substring(0, 50)}...`,
          'visitor-edit-03-content-modified.png'
        )
        return true
      } else {
        this.recordTest(
          '内容修改', 
          false, 
          `内容修改失败，当前内容: ${currentContent.substring(0, 50)}...`
        )
        return false
      }
    } catch (error) {
      this.recordTest('内容修改', false, `内容修改失败: ${error.message}`)
      return false
    }
  }

  // 测试4: 保存修改
  async testSaveModification() {
    try {
      console.log('💾 保存修改...')
      
      // 等待保存按钮出现
      const saveButtonExists = await this.waitForElement('button:has-text("保存修改"), .n-button:has-text("保存修改")')
      
      if (!saveButtonExists) {
        // 尝试查找其他可能的保存按钮
        const allButtons = await browser_evaluate(`
          Array.from(document.querySelectorAll('button')).map(btn => btn.textContent.trim())
        `)
        
        this.recordTest(
          '保存按钮检查', 
          false, 
          `未找到保存按钮，页面上的按钮: ${allButtons.join(', ')}`
        )
        return false
      }
      
      // 截图记录保存前状态
      await browser_take_screenshot({ filename: 'visitor-edit-04-before-save.png' })
      
      // 点击保存按钮
      await browser_click({ 
        element: 'button:has-text("保存修改"), .n-button:has-text("保存修改")' 
      })
      
      // 等待保存操作完成
      await browser_wait_for({ time: 3 })
      
      // 等待加载状态消失
      await browser_wait_until(`
        !document.querySelector('.n-spin-container .n-spin-body') ||
        !document.querySelector('.n-spin').classList.contains('n-spin--show')
      `, TEST_CONFIG.timeout)
      
      // 截图记录保存后状态
      await browser_take_screenshot({ filename: 'visitor-edit-05-after-save.png' })
      
      // 检查是否有成功提示
      const hasSuccessMessage = await browser_evaluate(`
        document.querySelector('.n-message--success, .n-notification--success') !== null
      `)
      
      // 验证保存按钮是否消失（表示没有未保存的更改）
      const saveButtonStillVisible = await browser_evaluate(`
        document.querySelector('button:has-text("保存修改"), .n-button:has-text("保存修改")') !== null
      `)
      
      if (hasSuccessMessage || !saveButtonStillVisible) {
        this.recordTest(
          '保存修改', 
          true, 
          '内容保存成功',
          'visitor-edit-05-after-save.png'
        )
        return true
      } else {
        this.recordTest(
          '保存修改', 
          false, 
          '保存操作可能失败，未检测到成功提示且保存按钮仍然可见'
        )
        return false
      }
    } catch (error) {
      this.recordTest('保存修改', false, `保存失败: ${error.message}`)
      return false
    }
  }

  // 测试5: 刷新验证持久化
  async testPersistence() {
    try {
      console.log('🔄 验证数据持久化...')
      
      // 刷新页面
      await browser_evaluate('window.location.reload()')
      await this.waitForPageLoad()
      
      // 等待内容加载
      await browser_wait_for({ time: 3 })
      
      // 获取刷新后的内容
      const persistedContent = await browser_evaluate(`
        const textarea = document.querySelector('textarea');
        return textarea ? textarea.value : null;
      `)
      
      // 截图记录刷新后状态
      await browser_take_screenshot({ filename: 'visitor-edit-06-after-refresh.png' })
      
      if (persistedContent === TEST_CONFIG.testContent.modified) {
        this.recordTest(
          '数据持久化', 
          true, 
          '数据持久化成功，刷新后内容保持一致',
          'visitor-edit-06-after-refresh.png'
        )
        return true
      } else {
        this.recordTest(
          '数据持久化', 
          false, 
          `数据持久化失败，期望: ${TEST_CONFIG.testContent.modified.substring(0, 50)}..., 实际: ${persistedContent ? persistedContent.substring(0, 50) + '...' : 'null'}`
        )
        return false
      }
    } catch (error) {
      this.recordTest('数据持久化', false, `持久化验证失败: ${error.message}`)
      return false
    }
  }

  // 测试6: 多设备响应式测试
  async testResponsive() {
    try {
      console.log('📱 测试响应式布局...')
      
      // 测试移动端
      await browser_resize({ width: 375, height: 667 })
      await browser_wait_for({ time: 1 })
      await browser_take_screenshot({ filename: 'visitor-edit-07-mobile.png' })
      
      // 验证移动端下编辑功能
      const mobileEditableInfo = await browser_evaluate(`
        const textarea = document.querySelector('textarea');
        return {
          exists: !!textarea,
          readonly: textarea?.readOnly || false,
          visible: textarea?.offsetHeight > 0
        };
      `)
      
      // 测试平板
      await browser_resize({ width: 768, height: 1024 })
      await browser_wait_for({ time: 1 })
      await browser_take_screenshot({ filename: 'visitor-edit-08-tablet.png' })
      
      // 恢复桌面端
      await browser_resize({ width: 1280, height: 800 })
      await browser_wait_for({ time: 1 })
      
      if (mobileEditableInfo.exists && !mobileEditableInfo.readonly && mobileEditableInfo.visible) {
        this.recordTest(
          '响应式测试', 
          true, 
          '移动端和平板端编辑功能正常',
          'visitor-edit-07-mobile.png'
        )
        return true
      } else {
        this.recordTest(
          '响应式测试', 
          false, 
          `移动端编辑功能异常: ${JSON.stringify(mobileEditableInfo)}`
        )
        return false
      }
    } catch (error) {
      this.recordTest('响应式测试', false, `响应式测试失败: ${error.message}`)
      return false
    }
  }

  // 生成测试报告
  generateReport() {
    const endTime = Date.now()
    const duration = endTime - this.startTime
    
    const report = {
      summary: {
        total: this.results.tests.length,
        passed: this.results.passed,
        failed: this.results.failed,
        duration: `${(duration / 1000).toFixed(2)}s`,
        successRate: `${((this.results.passed / this.results.tests.length) * 100).toFixed(1)}%`
      },
      tests: this.results.tests,
      config: TEST_CONFIG,
      timestamp: new Date().toISOString()
    }
    
    return report
  }

  // 打印测试报告
  printReport() {
    const report = this.generateReport()
    
    console.log('\n' + '='.repeat(80))
    console.log('🧪 访客编辑功能测试报告')
    console.log('='.repeat(80))
    console.log(`📊 测试概要:`)
    console.log(`   总计: ${report.summary.total} 项测试`)
    console.log(`   通过: ${report.summary.passed} 项`)
    console.log(`   失败: ${report.summary.failed} 项`)
    console.log(`   耗时: ${report.summary.duration}`)
    console.log(`   成功率: ${report.summary.successRate}`)
    console.log('')
    
    console.log('📋 测试详情:')
    report.tests.forEach((test, index) => {
      const status = test.passed ? '✅' : '❌'
      console.log(`   ${index + 1}. ${status} ${test.name}`)
      if (test.message) {
        console.log(`      ${test.message}`)
      }
      if (test.screenshot) {
        console.log(`      📸 截图: ${test.screenshot}`)
      }
    })
    
    console.log('\n' + '='.repeat(80))
    
    if (report.summary.failed === 0) {
      console.log('🎉 所有测试通过！访客编辑功能正常工作。')
    } else {
      console.log('⚠️  部分测试失败，请检查详情并修复相关问题。')
    }
    
    return report
  }

  // 运行所有测试
  async runAllTests() {
    console.log('🧪 开始运行访客编辑功能完整测试...')
    console.log(`📝 测试目标: ${TEST_CONFIG.baseUrl}/utilityTool/clipboard?shareId=${TEST_CONFIG.shareId}`)
    console.log('')
    
    // 设置初始窗口大小
    await browser_resize({ width: 1280, height: 800 })
    
    try {
      // 执行测试序列
      const tests = [
        () => this.testNavigation(),
        () => this.testEditPermission(),
        () => this.testContentModification(),
        () => this.testSaveModification(),
        () => this.testPersistence(),
        () => this.testResponsive()
      ]
      
      for (const test of tests) {
        const success = await test()
        if (!success) {
          console.log('⚠️  测试失败，继续执行剩余测试...')
        }
        // 短暂延迟，确保操作完成
        await browser_wait_for({ time: 1 })
      }
      
    } catch (error) {
      console.error('❌ 测试执行过程中发生错误:', error)
      this.recordTest('测试执行', false, `执行错误: ${error.message}`)
    }
    
    // 生成并打印报告
    const report = this.printReport()
    
    // 保存报告到文件
    try {
      await browser_evaluate(`
        const report = ${JSON.stringify(report, null, 2)};
        const blob = new Blob([report], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'visitor-edit-test-report-${Date.now()}.json';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      `)
      console.log('📄 测试报告已保存到下载文件夹')
    } catch (error) {
      console.log('⚠️  报告保存失败，但测试已完成')
    }
    
    return report
  }
}

// 执行测试
async function main() {
  const test = new VisitorEditTest()
  const report = await test.runAllTests()
  
  // 返回测试结果
  process.exit(report.summary.failed === 0 ? 0 : 1)
}

// 启动测试
main().catch(error => {
  console.error('💥 测试启动失败:', error)
  process.exit(1)
})